<!DOCTYPE html>  
<html lang="en">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>注册</title>  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <link rel="stylesheet" href="css/common.css">  
    <link rel="stylesheet" href="css/register.css">  
    <script type="text/javascript" src="js/jquery.min.js"></script>  
</head>  

<body>  
    <div class="container-login">  
        <div class="container-pic">  
            <img src="pic/book.png" width="150px">  
        </div>  
        <div class="login-dialog">  
            <h3>注册</h3>  
            <div class="row">  
                <span>用户名</span>  
                <input type="text" name="userName" id="userName" class="form-control">  
            </div>  
            <div class="row">  
                <span>密码</span>  
                <input type="password" name="password" id="password" class="form-control">  
            </div>  
            <div class="row">  
                <span>确认密码</span>  
                <input type="password" name="confirmPassword" id="confirmPassword" class="form-control">  
            </div> 
            <div class="row captcha-row">  
                <span>验证码</span>  
                <input type="text" name="captcha" id="captcha" class="form-control">  
            </div>  
            <div class="row captcha-row">
                <img id="captchaImg" src="/captcha/set" alt="验证码图片" onclick="refreshCaptcha()" class="captcha-img">
                <span class="refresh-btn" onclick="refreshCaptcha()">看不清？换一张</span>
            </div>   
            <div class="row">  
                <button type="button" class="btn btn-info btn-lg" onclick="register()">注册</button>  
            </div>  
            <div class="row" style="margin-top: 10px;">  
                <button type="button" class="btn btn-secondary btn-lg" onclick="window.location.href='login.html'">返回登录</button>  
            </div>  
        </div>  

        <div id="successMessage" class="success-message" style="display: none;">  
            注册成功！请点击下方按钮返回登录页面。  
            <button onclick="window.location.href='login.html'" class="btn btn-info btn-lg">返回登录</button>  
        </div>  
        <div id="errorMessage" class="error-message" style="display: none;">  
            注册失败，请稍后重试。  
        </div>  
    </div>  

    <script>  
        $(document).ready(function() {  
            // 监听‘Enter’键  
            $('#confirmPassword').on('keypress', function(e) {  
                if (e.which == 13) { // Enter键的码  
                    register(); // 调用注册函数  
                }  
            });  
        });  

        // 刷新验证码图片  
        function refreshCaptcha() {  
            $('#captchaImg').attr('src', '/captcha/set?' + new Date().getTime());  
        }  

        function register() {  
            var userName = $("#userName").val();  
            var password = $("#password").val();  
            var confirmPassword = $("#confirmPassword").val();  

            $.ajax({  
                url: "/captcha/get",  
                type: "post",  
                data: {  
                    inputCaptcha: $("#captcha").val()  
                },  
                success: function(isValid) {  
                    if (isValid.code==200&&isValid.data==true) {  
                        $.ajax({  
                            url: "/user/register",  
                            type: "post",  
                            data: {  
                                userName: userName,  
                                password: password,
                                confirmPassword:confirmPassword
                            },  
                            success: function(result) {  
                                if (result.code==200&&result.data==true) {  
                                    $('#successMessage').show();  
                                    $('#errorMessage').hide();  
                                } else {  
                                    alert(result.errorMSG);
                                    refreshCaptcha();   
                                }  
                            }  
                        });  
                    } else {  
                        alert("验证码错误或已过期，请重新输入！");  
                        refreshCaptcha();  
                    }  
                },  
                error: function() {  
                    alert("验证码验证失败，请稍后重试！");  
                }  
            });  
        }  
    </script>  
</body>  

</html>